import React from "react";
import {
  Col,
  Divider,
  Row,
  Button,
  Tooltip,
  RadioChangeEvent,
  Radio,
} from "antd";
import {
  CaretUpOutlined,
  CaretDownOutlined,
  QuestionCircleOutlined,
} from "@ant-design/icons";
import "./index.less";
import { useEffect, useState } from "react";
import * as echarts from "echarts";
import { trackLogDateRange, trackLogGroupCount } from "@/api/common";
import { IGroupCountRes } from "@/types/common";

type EChartsOption = echarts.EChartsOption;

const style: React.CSSProperties = { padding: "8px 0" };
// background: "#0092ff",
function HomePage() {
  const [radioValue, setRadioValue] = useState(7);
  const [trackGroutCountInfo, setTrackGroutCountInfo] = useState<
    IGroupCountRes[]
  >([]);
  useEffect(() => {
    queryTrackLogGroupCount();
  }, []);

  useEffect(() => {
    setTimeout(() => {
      queryTrackLogList();
    });
  }, [radioValue]);

  const queryTrackLogGroupCount = async () => {
    const res = await trackLogGroupCount();
    if (res) {
      setTrackGroutCountInfo(res);
    }
  };
  const queryTrackLogList = async () => {
    const res = await trackLogDateRange(radioValue);
    var chartDom = document.getElementById("chart")!;
    var myChart = echarts.init(chartDom);
    const legendData = Object.keys(res);
    const option: EChartsOption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: legendData,
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          data: res[legendData[0]].map((item) => item.moduleTime),
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: legendData.map((moduleName) => ({
        name: moduleName,
        type: "line",
        stack: "Total",
        areaStyle: {},
        emphasis: {
          focus: "series",
        },
        data: res[moduleName].map((item) => item.num),
      })),
    };
    myChart.setOption(option);
  };
  const onChange = (e: RadioChangeEvent) => {
    setRadioValue(e.target.value);
  };
  return (
    <div className="home-wrap">
      <div className="title-line">
        <div className="title-text">
          数据概览
          <Tooltip title="显示侧边栏模块访问次数，--表示无变化。" color="blue">
            <QuestionCircleOutlined />
          </Tooltip>
        </div>
      </div>
      <Row gutter={16}>
        {trackGroutCountInfo.map((item) => (
          <Col className="gutter-row" key={item.moduleName} span={6}>
            <div style={style} key={item.moduleName}>
              <div className="card-wrap">
                <div className="card-title">{item.moduleName}：</div>
                <div className="card-num">{item.num}</div>
                <div className="vary-box">
                  <span className="text">较前日</span>
                  {item.value ? (
                    <span style={{ color: "#1d7dfa" }}>
                      <CaretUpOutlined />
                      {item.value}
                    </span>
                  ) : (
                    "--"
                  )}
                </div>
              </div>
            </div>
          </Col>
        ))}
      </Row>
      <div className="title-line">
        <div className="title-text">数据趋势</div>
      </div>
      <Radio.Group onChange={onChange} defaultValue={radioValue}>
        <Radio.Button value={7}>最近七天</Radio.Button>
        <Radio.Button value={14}>最近14天</Radio.Button>
        <Radio.Button value={30}>最近30天</Radio.Button>
      </Radio.Group>
      <div id="chart" className="chart"></div>
    </div>
  );
}
export default HomePage;
